<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#f1f1f1" :fullscreen="true">
		<view class="page-wallet animate__animated animate__fadeIn">
			<view class="header flex align-center flex-between">
				<view> </view>
				<image
					class="close"
					src="/static/images/close.png"
					mode="aspectFill"
					@click="router.back()"
				></image>
			</view>
			<view v-if="finsh" class="finsh">
				<cl-icon class="icon" name="success-fill" color="#0C81F7" size="160rpx"></cl-icon>
				<view class="to">{{ $t("lock.text3") }}</view>
				<view class="tt">{{ $t("lock.text4") }}</view>
				<view class="btn" @click="toIndex">{{ $t("lock.btn") }}</view>
			</view>
			<view v-else>
				<view v-if="long" class="longnum">88669527</view>
				<view class="info" v-else>
					<view class="to">{{ $t("lock.text5") }}</view>
					<view class="tt">88669527</view>
				</view>
				<image
					v-if="long"
					class="longicon"
					src="/static/images/locka.png"
					mode="aspectFill"
				></image>
				<view class="btn flex flex-center flex-column" v-else>
					<div class="tag">
						<div class="arrow"><em></em><span></span></div>
						{{ $t("lock.text6") }}
					</div>
					<image
						@touchstart="start"
						@touchend="end"
						class="icon"
						src="/static/images/lockf.png"
						mode="aspectFill"
					></image>
				</view>
				<view class="mt30 flex flex-center">{{ $t("lock.cs") }}</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const app = useApp();
const ui = useUi();
const long = ref(false);
const finsh = ref(false);
const time = ref(0);
const interVal = ref(null);
console.log(router, 55);
const start = (e: any) => {
	long.value = true;
	interVal.value = setInterval(() => {
		time.value++;
	}, 1000);
};

const end = (e: any) => {
	clearInterval(interVal.value);
	long.value = false;
	if (time.value >= 2) {
		finsh.value = true;
	}
	time.value = 0;
};

const toIndex = () => {
	uni.reLaunch({ url: "/pages/user/soundLock/index" });
};
</script>

<style lang="scss" scoped>
.page-wallet {
	padding-bottom: 30rpx;

	.header {
		width: 100%;
		height: 120rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.close {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.info {
		.to {
			margin: 300rpx auto 80rpx;
			width: 400rpx;
			font-family: PingFangSC;
			font-weight: 300;
			font-size: 40rpx;
			color: #666666;
			line-height: 48rpx;
			text-align: center;
		}

		.tt {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 60rpx;
			color: #0c81f7;
			text-align: center;
		}
	}

	.btn {
		position: absolute;
		bottom: 170rpx;
		width: 100%;

		.icon {
			width: 132rpx;
			height: 132rpx;
			margin-top: 40rpx;
		}

		.tag {
			width: 200rpx;
			height: 80rpx;
			background: #ffffff;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(170, 170, 170, 0.24);
			border-radius: 10rpx;
			border: 4rpx solid #0c81f7;
			position: relative;
			text-align: center;
			line-height: 80rpx;
			font-family: PingFangSC;
			font-weight: 300;
			font-size: 32rpx;
			color: #0c81f7;

			.arrow {
				position: absolute;
				width: 20rpx;
				height: 20rpx;
				bottom: -20rpx;
				left: 80rpx;
			}

			.arrow em {
				border-color: #0c81f7 transparent transparent;
				display: block;
				border-width: 20rpx;
				position: absolute;
				border-style: solid dashed dashed dashed;
				font-size: 0;
				line-height: 0;
			}

			.arrow span {
				border-color: #fff transparent transparent;
				top: -4rpx;
				display: block;
				border-width: 20rpx;
				position: absolute;
				border-style: solid dashed dashed dashed;
				font-size: 0;
				line-height: 0;
			}
		}
	}

	.longnum {
		width: 100%;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 100rpx;
		color: #0c81f7;
		text-align: center;
		margin-top: 400rpx;
	}

	.longicon {
		position: absolute;
		bottom: 86rpx;
		width: 300rpx;
		height: 300rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.finsh {
		.icon {
			width: 160rpx;
			height: 160rpx;
			display: block;
			margin: 300rpx auto 60rpx;
		}

		.to {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 40rpx;
			color: #666666;
			text-align: center;
		}

		.tt {
			font-family: PingFangSC;
			font-weight: 300;
			font-size: 28rpx;
			color: #999999;
			margin-top: 30rpx;
			text-align: center;
		}

		.btn {
			width: calc(100% - 60rpx);
			margin-left: 30rpx;
			height: 88rpx;
			background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
			border-radius: 20rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 38rpx;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
			position: absolute;
			bottom: 100rpx;
		}
	}
}
</style>
